<!--  -->
<template>
  <div class="">
    <!-- 头部 -->
    <Nav title="账号列表">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- 内容 -->
    <div class="bankcard_con">
      <template v-for="(item,index) in bankList">
        <van-swipe-cell :key="index" class="show_public">
          <div class="bankcard_lists flex aligin-center">
            <span :class="[item.bank_type=='2'?'alipay':'wx']"></span>
            <div class="bankcard_lists_name">
              <h2 class="f-15 color-black">{{item.branch_bank_name}}</h2>
              <span class="f-12 color-gray pt-6">{{item.account_number}}</span>
              <span class="addresslists_default ml-10" v-if="item.is_default">默认</span>
            </div>
          </div>
          <template slot="right">
            <span
              class="delete flex justify-center aligin-center f-12"
              @click="deleteBank(item.id,index)"
            >删除</span>
            <router-link
              tag="span"
              :to="{name:'bankEdit',params:{id:item.id}}"
              class="share flex justify-center aligin-center f-12"
            >编辑</router-link>
          </template>
        </van-swipe-cell>
      </template>
    </div>
    <!-- 按钮 -->
    <div class="bankcard_foot">
      <router-link
        to="/AddBankCard"
        class="bankcard_btn btn_public flex aligin-center justify-center"
      >绑定支付方式</router-link>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { withdrawAccounts, withdrawDestory } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      bankList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    deleteBank(id, index) {
      withdrawDestory({ id }).then(res => {
        this.bankList.splice(index, 1);
      });
    }
  },
  created() {},
  mounted() {
    withdrawAccounts().then(({ data: { result } }) => {
      this.bankList = result;
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类

// 头部
// 内容
.bankcard_con {
  height: 285px;
}
.bankcard_lists {
  height: 75px;
  padding-left: 15px;
}
.bankcard_lists img {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  padding-right: 10px;
}
.bankcard_lists_name h2 {
  padding-bottom: 6px;
}
.bankcard_foot {
  margin: 25px 15px 0 15px;
}
.delete {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #e5e5e5;
  color: #fff;
}
.share {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #fe727b;
  color: #fff;
}
.addresslists_default {
  color: #fff;
  padding: 5px;
  font-size: 12px;
  background: linear-gradient(
    265deg,
    rgba(232, 48, 56, 1) 0%,
    rgba(254, 114, 123, 1) 100%
  );
  border-radius: 2px;
}
.shop {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #e83028;
  color: #fff;
}
.alipay {
  margin-right: 15px;
  height: 36px;
  width: 36px;
  background: url("../../assets/imgs/alipay.png");
  background-size: 100% 100%;
}
.wx {
  margin-right: 15px;
  height: 36px;
  width: 36px;
  background: url("../../assets/imgs/wx-pay.png");
  background-size: 100% 100%;
  border-radius: 50%;
}
</style>